<template>
  <div class="page-main">
    <query-page
      ref="queryForm"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      title="系统期段维护"
      :loading="isLoading"
      :data="renderData"
      :total="total"
      row-selection-type="checkbox"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #container-side>
        <a-button
          v-permission="['base:system-period-maintenance:saveByBatch']"
          type="primary"
          @click="addBatch"
          >批量新增</a-button
        >
        <a-button
          v-permission="['base:system-period-maintenance:save']"
          @click="addOne"
          >新增</a-button
        >
        <a-button
          v-permission="['base:system-period-maintenance:delete']"
          :disabled="!selectedKeys.length"
          @click="deletetClick"
          >删除</a-button
        >
      </template>
      <template #operate="{ record }">
        <a-button
          v-permission="['base:system-period-maintenance:update']"
          type="text"
          @click="showConsole(record)"
          >编辑</a-button
        >
      </template>
    </query-page>
    <mymodal
      v-if="showModal"
      ref="modalRef"
      :loading="editLoading"
      @close="closeModal"
      @save="saveModal"
    >
    </mymodal>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, reactive, ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import promiseModal from '@/common/utils/modal-promise';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '@/views/basic-configuration/components/procurementquery-form';
  import {
    page,
    deleteBatch,
  } from '@/api/balance-management/systemPeriodMaintenance';
  import useModal from '@/common/hooks/modal';
  import { Message } from '@arco-design/web-vue';
  import mymodal from './modal.vue';
  import { tableRenderConfig, tableComponentConfig } from './baseTableConfig';

  const { showModal, closeModal, openModal } = useModal();
  // 当前页面要渲染的查询条件
  const formRenderKeys = ['accountingYear'];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'index',
    'secretLevel',
    'periodNumber',
    'accountingYear',
    'startTime',
    'endTime',
    'periodType',
    'applicationType',
    'operate',
  ];
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref([]);
  const modalRef = ref();
  const editLoading = ref(false);
  const total = ref(0);
  const queryForm = ref();
  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    try {
      const res: any = await page(queryInfo);

      if (res.code === 200) {
        const data = reactive([...res.data.list]);
        total.value = res.data.total;
        renderData.value = data;
        isLoading.value = false;
        selectedKeys.value = [];
        if (data.length === 0 && total.value !== 0) {
          if (queryForm.value?.getStatus().pageNo > 1) {
            queryForm.value?.setCurrent(queryForm.value.getStatus().pageNo - 1);
            getData(queryForm.value.getStatus());
          }
        }
      }
    } catch (err: any) {
      Message.warning(err);
    }
  };
  const addBatch = () => {
    openModal();
    nextTick(() => {
      modalRef.value.show({}, '批量新增', false, ['save', 'return']);
    });
  };
  const addOne = () => {
    openModal();
    nextTick(() => {
      modalRef.value.show({}, '新增', false, ['save', 'return']);
    });
  };
  const showConsole = (rowData: object) => {
    openModal();
    nextTick(() => {
      modalRef.value.show({ ...rowData }, '编辑', true, ['save', 'return']);
    });
  };
  const saveModal = () => {
    closeModal();
    getData(queryForm.value.getStatus());
  };
  const deletetClick = async () => {
    if (selectedKeys.value.length < 1) {
      Message.warning('请选择要删除的记录！');
      return;
    }
    try {
      await promiseModal.confirm({
        title: '删除',
        content: '您确定要删除当前所选的数据？',
        modalStyle: { wordBreak: 'break-all' },
        okButtonProps: { status: 'danger' },
      });
    } catch (e: any) {
      return;
    }
    try {
      const res: any = await deleteBatch(selectedKeys.value);
      if (res.code === 200) {
        Message.success('删除成功');
        selectedKeys.value = [];
        getData(queryForm.value.getStatus());
      } else {
        Message.warning(res.message);
      }
    } catch (err: any) {
      console.log(err);
    } finally {
      isLoading.value = false;
    }
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };
</script>

<style lang="less" scoped>
  .page-con {
    height: 100%;
    background-color: #fff;
  }

  .table-header {
    height: 40px;
    line-height: 40px;
  }

  .table-side {
    width: 200px;
    height: 100%;
    margin-right: 20px;
    background-color: #00fff0;
  }
</style>
